<template >
  <div id="home">
    <div>
      <van-row type="flex" justify="left" align="center" id="header">
        <van-col span="2">
          <van-icon name="scan" />
        </van-col>
        <van-col span="20">
          <van-search placeholder="请输入搜索关键词" background="none" />
        </van-col>
        <van-col span="2">
          <van-icon name="other-pay" />
        </van-col>
      </van-row>
    </div>
    <div class="main">
      <div class="tag">
        <span>热搜：</span>
        <van-tag v-for="(item) in keywords" :key="item" round>{{item}}</van-tag>
      </div>
      <!-- 轮播图 -->
      <div class="swipe">
        <Swipe :banerslist="banners" />
      </div>
      <div class="content">
        <!-- menu -->
        <div class="menu">
          <div class="menu_con" v-for="(item) in menu" :key="item.sorts">
            <img :src="item.image" alt />
            <p>{{item.text}}</p>
          </div>
        </div>
        <!-- 今日抢购 -->
        <div class="rush_to_buy">
          <div class="rush_to_buy_title">
            <div>
              <img :src="imgUrl" alt />
            </div>
            <div>
              <span>更多</span>
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="rush_to_buy_cons">
            <div class="rush_to_buy_con" v-for="(item) in rushToBuy" :key="item.goodsId">
              <img :src="item.goodsImage" alt />
              <p class="van-ellipsis" v-html="item.goodsFullname"></p>
              <p v-html="'￥'+item.goodsPrice"></p>
            </div>
          </div>
        </div>
        <!-- 活动 -->
        <div class="activity-wrapper">
          <div class="home_banner">
            <img :src="wedgits[0].images[0].image" alt />
          </div>
          <div class="home_content">
            <div class="home_title">
              <img :src="wedgits[1].title.image" alt />
            </div>
            <div class="home_content_item">
              <div class="l_item">
                <img :src="wedgits[1].images[0].image" alt />
              </div>
              <div class="r_item">
                <img :src="wedgits[1].images[1].image" alt />
                <img :src="wedgits[1].images[2].image" alt />
              </div>
            </div>
          </div>
          <div class="home_banner">
            <img :src="wedgits[2].images[0].image" alt />
          </div>
          <div class="home_content">
            <div class="home_title">
              <img :src="wedgits[3].title.image" alt />
            </div>
            <div class="home_content_item part">
              <div class="part_1">
                <img :src="wedgits[3].images[0].image" alt />
                <img :src="wedgits[3].images[1].image" alt />
              </div>
              <div class="part_2">
                <img :src="wedgits[3].images[2].image" alt />
                <img :src="wedgits[3].images[3].image" alt />
                <img :src="wedgits[3].images[4].image" alt />
                <img :src="wedgits[3].images[5].image" alt />
              </div>
            </div>
          </div>
          <div class="home_banner">
            <img :src="wedgits[4].images[0].image" alt />
          </div>
          <div class="home_content">
            <div class="home_title">
              <img :src="wedgits[5].title.image" alt />
            </div>
            <div class="home_content_item part">
              <div class="part_1">
                <img :src="wedgits[5].images[0].image" alt />
                <img :src="wedgits[5].images[1].image" alt />
                <img :src="wedgits[5].images[2].image" alt />
                <img :src="wedgits[5].images[3].image" alt />
              </div>
              <div class="part_2">
                <img :src="wedgits[5].images[4].image" alt />
                <img :src="wedgits[5].images[5].image" alt />
                <img :src="wedgits[5].images[6].image" alt />
                <img :src="wedgits[5].images[7].image" alt />
              </div>
            </div>
          </div>
          <div class="home_banner">
            <img :src="wedgits[6].images[0].image" alt />
          </div>
        </div>
        <!-- 推荐 -->
        <div class="recomd">
          <Recommend />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import imgUrl from "../assets/images/todayBuy_03.jpg";
import Api from "../Api/index.js";
import Swipe from "../components/Swipe";
import Recommend from "../components/recommend";

export default {
  data() {
    return {
      imgUrl,
      banners: [],
      keywords: [],
      menu: [],
      rushToBuy: [],
      wedgits: []
    };
  },
  async created() {
    let {
      data: { data }
    } = await Api.hwj.get();

    //热搜
    this.keywords = data.keywords[0].trim().split(/\s+/);
    //轮播图
    this.banners = data.banners;
    //菜单
    this.menu = data.menu.features;
    //今日抢购
    this.rushToBuy = (await Api.hl.get("")).data.data;
    //活动
    this.wedgits = data.wedgits;
  },
  components: {
    Swipe,
    Recommend
  }
};
</script>


<style lang="scss" scoped>
$home_w: 10rem;
$bgc: #f6f6f6;

#home {
  width: $home_w;
  margin: 0 auto;
  background-color: $bgc;
}
#home #header {
  position: fixed;
  top: 0;
  width: $home_w;
  z-index: 999;
  height: 1.253333rem;
  background-color: #fd5b00;
  .van-cell {
    padding: 0;
  }

  .van-col {
    color: #fff;
    text-align: center;
    i {
      font-size: 0.533333rem;
    }
  }
}
#home .main {
  margin-top: 1.253333rem;
  overflow-y: auto;
  //热搜
  .tag {
    background-color: #fd5b00;
    font-size: 0.293333rem;
    color: #fff;
    padding-left: 0.3rem;
    padding-bottom: 0.266667rem;
    .van-tag {
      font-size: 0.266667rem;
      margin-right: 0.266667rem;
    }
    .van-tag--default {
      background: rgba($color: #000000, $alpha: 0.3);
    }
  }
  // 轮播图
  .swipe {
    height: 4.64rem;
  }
  .content {
    padding: 0.453333rem;
  }
  //菜单导航
  .menu {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 0.906667rem 0.426667rem;
    img {
      width: 1.066667rem;
      height: 1.066667rem;
    }
    .menu_con {
      width: 20%;
      text-align: center;
      margin-bottom: 0.72rem;
      p {
        font-size: 0.32rem;
        line-height: 0.506667rem;
        margin-top: 0.453333rem;
      }
    }
  }
  //今日抢购
  .rush_to_buy {
    height: auto;
    padding: 0 0.453333rem 0.746667rem 0.453333rem;
    background-color: #fff;
    .rush_to_buy_title {
      height: auto;
      display: flex;
      padding: 0.373333rem 0 0.373333rem 0.293333rem;
      justify-content: space-between;
      font-size: 0.346667rem;
      img {
        width: 1.786667rem;
        height: 0.453333rem;
      }
    }
    .rush_to_buy_cons {
      display: -webkit-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      height: 4rem;
      .rush_to_buy_con {
        width: 3.733333rem;
        font-size: 0.32rem;
        margin-right: 1.013333rem;
        text-align: center;
        img {
          width: 2.333333rem;
          height: 2.333333rem;
        }
        p {
          margin-top: 0.266667rem;
        }
        p:nth-child(3) {
          color: #fd5b00;
        }
        .van-ellipsis {
          margin-top: 0.133333rem;
        }
      }
    }
  }
  //活动
  $h_1: 5.253333rem;
  $w: 49%;
  .hozFlex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .img {
    img {
      width: 49%;
      height: 2.533333rem;
      margin-bottom: 0.266667rem;
    }
  }
  .activity-wrapper {
    // padding: 0 0 0;
    .home_banner {
      width: 100%;
      height: 2rem;
      margin-top: 0.72rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .home_content {
      width: 100%;
      .home_title {
        width: 100%;
        height: 1.706667rem;
        line-height: 1.706667rem;
        text-align: center;
        img {
          width: 2.666667rem;
          height: 0.64rem;
        }
      }
      .home_content_item {
        @extend .hozFlex;
        width: 100%;
        .l_item {
          height: $h_1;
          width: $w;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .r_item {
          display: flex;
          flex-direction: column;
          height: $h_1;
          width: $w;
          img {
            height: 48%;
            width: 100%;
            justify-content: space-between;
          }
        }
        .part_1 {
          height: auto;
          @extend .hozFlex;
          @extend .img;
        }
        .part_2 {
          margin-top: 0.266667rem;
          height: 3.066667rem;
          @extend .hozFlex;
          img {
            width: 24%;
          }
        }
      }
      .part {
        display: flex;
        flex-direction: column;
      }
    }
  }

  //药师推荐
  .recomd {
    margin-top: 0.733333rem;
  }
}
</style>